<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <title th:text="${titles}"></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="static/assets/images/logo-header-05.png"/>
    <link rel="stylesheet" type="text/css" href="static/assets/css/libs/bootstrap/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="static/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" type="text/css" href="static/assets/fonts/ionicons-2.0.1/css/ionicons.min.css">

    <link rel="stylesheet" type="text/css" href="static/assets/css/libs/slick/slick.css">

    <link rel="stylesheet" type="text/css" href="static/assets/css/libs/magnific-popup/magnific-popup.css">

    <link rel="stylesheet" type="text/css" href="static/assets/style.css">
    <link rel="stylesheet" type="text/css" href="static/js/page.css">
</head>
<body class="responsive home-2 list-videos-page">
<div id="wrapper-container">

    <header class="site-header sticky-header layout-2" th:replace="search/header::header">

    </header>


    <nav class="mobile-menu-container mobile-effect">
        <ul class="nav navbar-nav">

            <li class="menu-item-has-children">
                <a href="list-videos.html">
                    Videos
                </a>
                <ul class="sub-menu">
                    <li>
                        <a href="submit-video.html">
                            Submit Video
                        </a>
                    </li>
                </ul>
            </li>


        </ul>
        <div class="widget-area">
            <aside class="widget widget_nav_menu">
                <div class="menu-useful-links-container">
                    <ul class="menu">
                        <li class="menu-item">
                            <a href="about.html">CLIENTS</a>
                        </li>
                        <li class="menu-item menu-item-has-children">
                            <a href="javascript:;">SERVICES</a>
                            <ul class="sub-menu">
                                <li class="menu-item">
                                    <a href="contact.html">
                                        Menu item
                                    </a>
                                </li>
                                <li class="menu-item">
                                    <a href="contact.html">
                                        Menu item
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-item">
                            <a href="contact.html">CONTACT US</a>
                        </li>
                    </ul>
                </div>
            </aside>
            <aside class="widget widget_text">
                <div class="textwidget">
                    <div class="copyright-text">
                        Copyright 2018 Corporate WordPress Theme by ThimPress. <a href="javascript:;">ThimPress</a>
                    </div>
                </div>
            </aside>
        </div>
    </nav>

    <div id="main-content">
        <div class="content-area">
            <div class="page-title">
                <div class="main-top" style="background-image: url(static/assets/images/bg-page-title-01.jpg);">
                    <div class="overlay-top-header"></div>
                    <div class="content container">
                        <a href="" id="main_list_text_href">
                            <h1 id="main_list_text">
                                视频列表
                            </h1>
                        </a>
                        <div class="wrap-breadcrumb" id="video_main">
                            <ul class="breadcrumbs">
                                <li>
                                    <a href="javascript:;">
                                        首页
                                    </a>
                                </li>
                                <li>
                                    <span class="breadcrum-icon">/</span>
                                    视频列表
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="site-content layout-1">
                <div class="container">
                    <div class="row">
                        <main class="site-main col-12">
                            <div class="wrap-main-content">

                                <div class="thim-videos_list-videos-page">

                                    <div class="videos-list">
                                        <div class="wrap-element js-call-isotope-filter">
                                            <div class="heading-element">
                                                <div class="wrap-filter-group">
                                                    <div class="filter-tope-group">

                                                        <span class="item-tope active" data-filter="*">全部</span>
                                                        <th:block th:each="menu: ${menus}">
                                                            <span class="item-tope" th:attr="data-filter=${menu.menuId}"
                                                                  th:text="${menu.menu}">
                                                            </span>
                                                        </th:block>
                                                    </div>
                                                </div>
                                                <div class="wrap-select-filter">
                                                    年份 :
                                                    <div class="select-filter">
                                                        <label>
                                                            <select>
                                                                <option>所有</option>
                                                                <option>2016</option>
                                                                <option>2017</option>
                                                                <option>2018</option>
                                                            </select>
                                                        </label>
                                                    </div>
                                                </div>
                                                <!--                                                <div class="wrap-filter-videos js-filter-full-container">-->
                                                <!--                                                    <a href="javascript:;" class="toggle-filter">-->
                                                <!--                                                        Filter videos-->
                                                <!--                                                    </a>-->
                                                <!--                                                    <div class="content-filter">-->
                                                <!--                                                        Filter content-->
                                                <!--                                                    </div>-->
                                                <!--                                                </div>-->
                                            </div>
                                            <div class="row isotope-grid col-10" style="float: left">
                                                <th:block th:each="video,archiveStat : ${videos.list}">
                                                    <div class="col-sm-6 col-md-4 col-lg-3 isotope-item menuId">
                                                        <div class="item-post">
                                                            <div class="pic-item">
                                                                <img th:src="${video.picImg}" alt="IMG">
                                                                <div class="overlay"></div>
                                                                <div class="meta-info">
                                                                    <div class="imdb">
                                                                        <span class="value" th:text="${video.videoFen}">5</span>IMDb
                                                                    </div>
                                                                    <div class="label" style="background: #e40914;">
                                                                        Hot
                                                                    </div>
                                                                </div>
                                                                <a th:href="${video.videoUrl}"
                                                                   class="btn-play popup-youtube"></a>
                                                            </div>
                                                            <div class="text-item">

                                                                <h4 class="title">
                                                                    <a href="single-video.html">
                                                                        <th:block
                                                                                th:text="${video.videoTitle}"></th:block>
                                                                    </a>
                                                                </h4>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </th:block>
                                            </div>
                                            <div class="row col-2" style="float: right;padding: 0" id="ranking">

                                            </div>
                                        </div>
                                    </div>
                                    <div style="clear: both"></div>
                                    <div class="loop-pagination" id="pages_list"></div>
                                    <!--                                    <ul class="loop-pagination">-->

                                    <!--                                        <li>-->
                                    <!--                                            <a href="javascript:;" class="page-numbers">-->
                                    <!--                                                1-->
                                    <!--                                            </a>-->
                                    <!--                                        </li>-->
                                    <!--                                        <li>-->
                                    <!--                                            <a href="javascript:;" class="page-numbers current">-->
                                    <!--                                                2-->
                                    <!--                                            </a>-->
                                    <!--                                        </li>-->
                                    <!--                                        <li>-->
                                    <!--                                            <a href="javascript:;" class="page-numbers">-->
                                    <!--                                                3-->
                                    <!--                                            </a>-->
                                    <!--                                        </li>-->
                                    <!--                                        <li>-->
                                    <!--                                            <a href="javascript:;" class="page-numbers">-->
                                    <!--                                                4-->
                                    <!--                                            </a>-->
                                    <!--                                        </li>-->
                                    <!--                                        <li>-->
                                    <!--                                            <a href="javascript:;" class="page-numbers next">-->
                                    <!--                                                Next-->
                                    <!--                                                <i class="ion ion-ios-arrow-thin-right"></i>-->
                                    <!--                                            </a>-->
                                    <!--                                        </li>-->
                                    <!--                                    </ul>-->
                                </div>

                            </div>
                        </main>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="site-footer layout-1" th:replace="search/footer::footer">

    </footer>
    <div id="thim-preloading">
        <div class="custom-image">
            <img src="static/assets/images/wave.gif" alt="Loading">
        </div>
    </div>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script th:src="@{/static/assets/js/libs/bootstrap/popper.js}"></script>
<script th:src="@{/static/assets/js/libs/bootstrap/bootstrap.min.js}"></script>

<script th:src="@{/static/assets/js/libs/magnific-popup/jquery.magnific-popup.min.js}"></script>

<script th:src="@{/static/assets/js/libs/slick/slick.min.js}"></script>

<script th:src="@{/static/assets/js/libs/isotope/isotope.pkgd.min.js}"></script>

<script th:src="@{/static/assets/js/libs/select2/select2.min.js}"></script>

<script th:src="@{/static/assets/js/thim-custom.js}"></script>
<div id="back-to-top" class="btn-back-to-top">
    <i class="ion ion-ios-arrow-thin-up"></i>
</div>
<script th:src="@{/static/js/page.js}"></script>

<script type="text/javascript">
    var int = self.setInterval("clock()", 3000);
    var indexthis = 0;

    function clock() {
        if (indexthis >= listVideo.length) {
            indexthis = 0;
        }
        for (var i = 0; i < listVideo.length; i++) {
            if (i === indexthis) {
                var listKey = listVideo[i];
                $(".main-top").css("background-image", "url(" + listKey.picImg + ")");
                $("#main_list_text").html(listKey.videoTitle);
                $("#main_list_text_href").attr("href", "single-video.html?file=" + listKey.fileId);
                indexthis++;
                console.log(indexthis);
                break;
            }
        }
    }

    var searchKey = "[[${search}]]";
    var selectType = "[[${selectType}]]";

    function set_select_checked(selectId, checkValue) {
        var select = document.getElementById(selectId);
        for (var i = 0; i < select.options.length; i++) {
            if (select.options[i].value == checkValue) {
                select.options[i].selected = true;
                break;
            }
        }
    }

    /**
     * 页面初始化执行
     */
    $(function () {
        $("#keyword").val(searchKey);
        set_select_checked("selectType", selectType);
        document.onkeydown = function (e) {
            var ev = document.all ? window.event : e;
            if (ev.keyCode === 13) {
                fiterItem("*", page, pageSize)
            }
        }
    });
</script>
</body>
</html>
